<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.shop-header{
				width: 17rem;
				height: 2.35rem;
				display: flex;
				justify-content: space-between;
				font-size: 1rem;
				align-items: center;
				color: #999;
			}
			.shop-header i:nth-of-type(1){
				font-size: 1.5rem;
			}
			.shop-header span{
				color: #333;
			}
			.shop-mian{
				width: 18rem;
				background: #eeeeee;
			}
			.shop-mian img{
				width: 100%;
				
			}
			.shop-mian .div{
				width: 17rem;
				padding:0 0.5rem;
				background: #fff;	
			}
			.shop-mian .div p{
				height: 1.5rem;
				color: #333;
				line-height: 1.5rem;
				font-size: 0.75rem;
			}
			.shop-mian .div p:nth-of-type(2){
				height: 1.5rem;
				color: #f24046;
				line-height: 1.5rem;
			}
			.shop-mian .div p:nth-of-type(3){
				height: 2rem;
				color: #999;
				line-height: 1rem;
			}
			.shop-mian>ul{
				width: 17rem;
				background: #fff;
				display: flex;
				padding: 0.5rem 0.5rem;
				justify-content: space-between;
			}
			.shop-mian>ul li{
				width: 30%;
				color: #999;
				font-size: 0.75rem;
			}
			.shop-mian>ul li img{
				width: 0.5rem;
			}
			.act{
				border-bottom: 2px solid #f24046;
			}
			.tab{
				width: 18rem;
				display: flex;
				background: #fff;
				margin-top: 1rem;
				border-bottom: 1px solid #eee;
			}
			.tab div{
				flex: 1;
				height: 2.3rem;
				border-right: 1px solid #eee;
				text-align: center;
				line-height: 2.3rem;
				color: #666;
				font-size: 0.75rem;
			}
			.shop-footer{
				width: 18rem;
				padding:0.4rem 0;
				display: flex;
				position: fixed;
				bottom: 0;
				z-index: 20;
				background: #f6f6f6;
			}
			.shop-footer div{
				flex:1;
				text-align: center;
			}
			.shop-footer div button{
				width: 3.75rem;
				height: 1.5rem;
				background: none;
				border:none;
				outline: none;
				border-radius: 5px;
				font-size: 0.75rem;
			}
			.shop-footer div:nth-of-type(1) button{
				border:1px solid #f24046;
				color: #f24046;
			}
			.shop-footer div:nth-of-type(2) button{
				background: #f24046;
				color: #fff;
			}
			.view {
				background: #fff;
			}
		</style>
	</head>
	<body>
		 <div class="shop-header">
		 	<i class="fa fa-fw fa-angle-left" ui-sref="home"></i>
		 	<span>收藏品详情</span>
		 	<i class="fa fa-fw fa-share-alt"></i>
		 </div>
		 <div class="shop-mian" ng-repeat="item in obj">
		 	<img ng-src="{{item.img}}" alt="" />
		 	<div class="div">
		 		<p>{{item.txt}}</p>
		 		<p>￥{{item.price}}</p>
		 		<p>{{item.referral}}</p>
		 		 
		 	</div>
		 	<ul>
		 		<li>
		 			<span>材质：</span>
		 			<img src="img/x.png"/>
		 			<img src="img/x.png"/>
		 			<img src="img/x.png"/>
		 		</li>
		 		<li>
		 			<span>材质：</span>
		 			<img src="img/x.png"/>
		 			<img src="img/x.png"/>
		 			<img src="img/x.png"/>
		 		</li>
		 		<li>
		 			<span>材质：</span>
		 			<img src="img/x.png"/>
		 			<img src="img/x.png"/>
		 			<img src="img/x.png"/>
		 		</li>
		 	</ul>
		
		   <div class="tab">
		   	  <div ui-sref="shop.tu" ui-sref-active="act">图文介绍</div>
		   	  <div ui-sref="shop.ping" ui-sref-active="act">评论</div>
		   	 
		   </div>
		   <div ui-view class="view">
		   	
		   </div>
		   <div	class="shop-footer">
		   	    <div><button><i class="fa fa-fw fa-heart-o"></i>  喜欢</button></div>
		   	    <div><button>去购买</button></div>
		   </div>
		 </div>
	</body>
	
</html>
